<!-- 登记管理 -->
<template>
	<view class="box">
		<view class="top">
			<view class="change">
				<text>楼栋</text>
				<view @click="selectFloor()" :class="floorName ? 'on':''">{{floorName ? floorName : '请选择楼栋'}}</view>
			</view>
			<view class="change">
				<text>单元</text>
				<view @click="selectUnit()" :class="unitNum ? 'on':''">{{unitNum ? unitNum : '请选择单元'}}</view>
			</view>
		</view>
		<view class="center">
			<scroll-view scroll-y class="floor-list" v-if="hasLayer">
				<view class="item" v-for="(item,index) in layerNum" :key="index" @click="lookLayer(item)"
					:class="currentLayer == item ? 'on' : ''">{{item}}层</view>
			</scroll-view>
			<view class="room-list" :class="hasLayer ? 'has-data':''">
				<view class="item" v-for="(item,index) in roomList" :key="index" :id="item.layerId">
					<view class="title">{{item.roomName}}</view>
					<view class="people-list">
						<view class="people-item" v-for="(user,i) in item.users" :key="i"
						:class="user.state == 1 ? 'red' : user.state == 2 ? 'green':''" @click="onUserInfo(user)">
							{{user.userName}}
						</view>
					</view>
				</view>

				<noData :noDataText="noDataText" v-if="!hasData" :buttonShow="false"></noData>

			</view>
		</view>
		<view class="bottom" @click="addRegister()">
			<u-icon name="plus-circle" color="#2979ff" size="40"></u-icon>
			<text>登记核酸检测人员</text>
		</view>

		<u-picker mode="selector" v-model="floorShow" :default-selector="[0]" :range="floorList" @confirm="confirmFloor"
			range-key="floorName"></u-picker>

		<u-picker mode="selector" v-model="unitShow" :default-selector="[0]" :range="unitList" @confirm="confirmUnit"
			range-key="unitNum"></u-picker>


		<view class="mask" v-if="maskShow"></view>
	</view>

</template>

<script>
	import {
		getQueryFloors,
		getQueryUnits
	} from "@/api/common"
	import {
		saveNucleicUser,
		updateNucleicUser,
		deleteNucleicUser,
		queryNucleicUser
	} from '@/api/nucleic.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				maskShow: false, // 是否显示遮罩

				floorList: [],
				floorId: '',
				floorName: '',
				floorShow: false,

				unitList: [],
				unitId: '',
				unitNum: '',
				unitShow: false,

				layerNum: [], // 楼层
				currentLayer: '0', // 当前选中楼层 苦思量

				addRegisterFn: false,

				// 页面数据
				hasData: false,
				hasLayer: false,
				roomList: [],
				noDataText: '暂无检测人员，请先选择楼栋单元。',
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onShow(option) {
			if (this.addRegisterFn) {
				this.queryNucleicUser()
				this.addRegisterFn = false
			}
		},
		onLoad() {
			this.getLoadData()
		},
		watch:{
			layerNum(val){
				if(val.length > 0){
					this.hasLayer = true
				}else{
					this.hasLayer = false
				}
			}
		},
		methods: {
			/**
			 * 页面进入时，默认查看的数据
			 */
			getLoadData() {
				let self = this
				let floorParams = {
					communityId: this.userCommunity.communityId,
					page: 1,
					row: 100
				}
				getQueryFloors(floorParams).then((res) => {
					self.floorList = res.apiFloorDataVoList

					self.floorName = res.apiFloorDataVoList[0].floorName
					self.floorId = res.apiFloorDataVoList[0].floorId

					let unitParams = {
						communityId: self.userCommunity.communityId, //小区编号
						floorId: self.floorId,
						name: '',
						page: 1,
						row: 100
					}
					getQueryUnits(unitParams).then((res) => {
						self.unitNum = res[0].unitNum
						self.unitId = res[0].unitId
						for (let n = 0; n < Number(res[0].layerCount); n++) {
							self.layerNum.push(n + 1)
						}

						self.queryNucleicUser()
					}).catch(function(reason) {

					})
				}).catch(function(reason) {

				})
			},
			/**
			 * 楼栋
			 */
			selectFloor() {
				this.queryFloor()
			},
			queryFloor() {
				let params = {
					communityId: this.userCommunity.communityId,
					page: 1,
					row: 100
				}
				getQueryFloors(params).then((res) => {
					this.floorList = res.apiFloorDataVoList
					this.floorShow = true
				}).catch(function(reason) {

				})
			},
			confirmFloor(e) {
				let i = e[0]
				this.floorName = this.floorList[i].floorName
				this.floorId = this.floorList[i].floorId
				this.unitList = []
				this.unitId = ''
				this.unitNum = ''
			},
			/**
			 * 单元
			 */
			selectUnit() {
				if (!this.floorName) {
					uni.showToast({
						title: "请选择楼栋",
						icon: 'none',
						duration: 1500
					})
					return
				}

				this.queryUnit()
			},
			queryUnit() {
				let params = {
					communityId: this.userCommunity.communityId, //小区编号
					floorId: this.floorId,
					name: '',
					page: 1,
					row: 100
				}
				getQueryUnits(params).then((res) => {
					this.unitList = res
					this.unitShow = true
				}).catch(function(reason) {

				})
			},
			confirmUnit(e) {
				let i = e[0]
				this.unitNum = this.unitList[i].unitNum
				this.unitId = this.unitList[i].unitId
				this.layerNum = []
				for (let n = 0; n < Number(this.unitList[i].layerCount); n++) {
					this.layerNum.push(n + 1)
				}
				this.queryNucleicUser()
			},
			/**
			 * 选择层数
			 */
			lookLayer(item) {
				this.currentLayer = item
				let id = '#layer' + item
				console.log('id', id)
				if(!uni.createSelectorQuery().select(id)) return false
				uni.createSelectorQuery().select(id).boundingClientRect(data => { //目标位置的节点：类class或者id
					if (data.id) {
						uni.createSelectorQuery().select(".room-list").boundingClientRect(
							res => { //最外层盒子的节点：类class或者id
								console.log(res)
								uni.pageScrollTo({
									duration: 500, //过渡时间
									scrollTop: data.top - 60, //到达距离顶部的top值
									//scrollTop:data.top - res.top,//如果置顶
								})
							}).exec()
					}
				}).exec();
			},
			/**
			 * 登记核酸检测人员
			 */
			addRegister() {
				let data = {
					floorId: this.floorId,
					floorName: this.floorName,
					unitId: this.unitId,
					unitNum: this.unitNum,
				}

				uni.navigateTo({
					url: `/pages/nucleic/addRegister/addRegister?data=${JSON.stringify(data)}`
				})
			},
			/**
			 * 获取核酸检测人员列表
			 */
			queryNucleicUser() {
				let that = this
				let parmas = {
					communityId: this.userCommunity.communityId,
					floorId: this.floorId,
					unitId: this.unitId,
				}
				queryNucleicUser(parmas).then((res) => {
					this.roomList = []
					if (res.code == 0) {
						let data = res.data
						if (res.data.length > 0) {

							data.forEach((n, i) => {
								n.rooms.forEach((m, j) => {
									if (j == 0) {
										m['layerId'] = 'layer' + n.layer
									}

									this.roomList.push(m)
								})
							})
							this.hasData = true
						} else {
							this.hasData = false
							this.noDataText = '该单元暂无检测人员。'
						}
					}
				}).catch(function(reason) {})
			},
			/**
			 * 个人信息
			 */
			onUserInfo(item){
				let data = {
					id:item.id,
					floorName:item.floorName,
					floorId:item.floorId,
					unitNum:item.unitNum,
					unitId:item.unitId,
					layerNum:item.layerNum,
					roomName:item.roomName,
					userName:item.userName,
					tel:item.tel,
					state:item.state,
					stateName:item.stateName,
					roomNum:item.roomNum,
					roomId:item.roomId,
				}
				
				uni.navigateTo({
					url: `/pages/nucleic/userInfo/userInfo?data=${JSON.stringify(data)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		padding-top: 96rpx;
	}

	.top {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 16rpx 32rpx;
		box-shadow: $nl-box-shadow-grey;

		.change {
			flex: 1;
			display: flex;
			align-items: center;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 28rpx;

			text {}

			view {
				flex: 1;
				margin-left: 16rpx;
				padding: 0 24rpx;
				background-color: #F3F3F3;
				border-radius: $nl-border-radius-main;
				color: #6f6f6f;
			}

			.on {
				color: $uni-color-primary;
			}
		}



		.change:nth-child(1) {
			margin-right: 40rpx;
		}
	}

	.center {
		display: flex;

		.floor-list {
			width: 140rpx;
			height: calc(100vh - 188rpx);
			position: fixed;
			left: 0;
			top: 96rpx;
			background-color: #FFFFFF;
			padding-bottom: 92rpx;


			.item {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				border-bottom: 2rpx solid #dcdcdc;
			}

			.item:active {
				background-color: #f9f9f9;
			}

			.on {
				color: #007aff;
				background-color: #E0F0FF;
			}


		}

		.room-list {
			width: 100%;
			padding: 24rpx 32rpx 92rpx;

			.item {
				background-color: #FFFFFF;
				border-radius: $nl-border-radius-main;
				box-shadow: $nl-box-shadow-grey;
				margin-bottom: 32rpx;

				.title {
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 32rpx;
					border-bottom: 2rpx solid #dcdcdc;
				}

				.people-list {
					padding: 16rpx 16rpx 0;

					.people-item {
						display: inline-block;
						border-radius: $nl-border-radius-main;
						border: 2rpx solid #dcdcdc;
						padding: 14rpx 32rpx;
						font-size: 28rpx;
						margin: 0 16rpx 20rpx;
					}
					
					.red{
						color: $uni-color-error;
						border: 2rpx solid $uni-color-error;
					}
					
					.green{
						color: $uni-color-success;
						border: 2rpx solid $uni-color-success;
					}
				}
			}
			
			
		}

		.has-data {
			width: calc(100% - 140rpx);
			margin-left: 140rpx;
		}
	}



	.bottom {
		width: 100%;
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		box-shadow: $nl-box-shadow-grey;
		font-size: 28rpx;

		text {
			color: $nl-color-main;
			margin-left: 8rpx;
		}
	}

	.bottom:active {
		background-color: #f9f9f9;
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
	}
</style>
